<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
"Prisonner's (ASCII) clock" by Stephane Tsacas
stephane.tsacas+eleeno@gmail.com
Description : straight ascii. When hours = 6 strike the line and continue under it.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>"Prisonner's ASCII time"</title>
<script type="text/javascript"><!--
// Set to something for debugging.
var debug = 0;
var secondHand = 0;

// Wrapper to new Date() so you can set the time manually when debugging.
function currentTime()
{
  var timeNow;

  if (debug)
    {
      timeNow = new Date(2009, 4, 1, 22, 44, 0); // Set the time as you want (3 last args).
    }
  else
    {
      timeNow = new Date();
    }
  return timeNow;
}

var hourDots = 
  new Array('o',
	    'oo',
	    'ooo',
	    'oooo',
	    'ooooo'
	    );

var minuteDots = 
  new Array('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;',
	    '&bull;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;',
	    '&bull;&bull;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;',
	    '&bull;&bull;&bull;&bull;&nbsp;&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;',
	    '&bull;&bull;&bull;&bull;&bull;&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;',
	    '&bull;&bull;&bull;&bull;&bull;<BR>&nbsp;&nbsp;&nbsp;&nbsp;',
	    '&bull;&bull;&bull;&bull;&bull;<BR>&bull;&nbsp;&nbsp;&nbsp;',
	    '&bull;&bull;&bull;&bull;&bull;<BR>&bull;&bull;&nbsp;&nbsp;',
	    '&bull;&bull;&bull;&bull;&bull;<BR>&bull;&bull;&bull;&nbsp;',
	    '&bull;&bull;&bull;&bull;&bull;<BR>&bull;&bull;&bull;&bull;'
	    );

var secondMarkers = new Array('0', '&frac14;', '&frac12;', '&frac34;');


// Main function, does it all. Called every second.
function blinkSomething()
{
  var timeNow = currentTime();
  var hours = timeNow.getHours();
  var minutes = timeNow.getMinutes();
  var seconds = timeNow.getSeconds();

  var firstHoursLine = document.getElementById("firstHoursLine");
  var secondHoursLine = document.getElementById("secondHoursLine");
  var tenMinutesLine = document.getElementById("tenMinutesLine");
  var minutesLine = document.getElementById("minutesLine");

  secondHoursLine.innerHTML = "";
  firstHoursLine.innerHTML = "";

//  document.getElementById("clockDisplay").style.fontFamily = 'monospace';
//  document.getElementById("clockDisplay").face = 'courier';
//  document.getElementById("clockDisplay").style.fontSize = '18pt';


  // Get the hours value, and switch on all the blocks from this value down to 1.
  switch (hours)
    {
      // XXX how to display noon or midnight is a matter of taste.
    case 23:
    case 11:
      secondHoursLine.innerHTML += "|";
    case 22:
    case 10:
      secondHoursLine.innerHTML += "|";
    case 21:
    case 9:
      secondHoursLine.innerHTML += "|";
    case 20:
    case 8:
      secondHoursLine.innerHTML += "|";
    case 19:
    case 7:
      secondHoursLine.innerHTML += "|";
    case 18:
    case 6:
      firstHoursLine.style.textDecoration = "line-through";
    case 17:
    case 5:
      firstHoursLine.innerHTML += "|";
    case 16:
    case 4:
      firstHoursLine.innerHTML += "|";
    case 15:
    case 3:
      firstHoursLine.innerHTML += "|";
    case 14:
    case 2:
      firstHoursLine.innerHTML += "|";
    case 13:
    case  1:
      firstHoursLine.innerHTML += "|";
    }

  //	if (hours >= 6) document.getElementById("firstHoursLine").style.textDecoration = "line-through";

  // Now handle the "10 minutes" lines
  tenMinutesLine.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
  // Otherwise switch on all the needed ones.
  if (minutes >= 10) tenMinutesLine.innerHTML = hourDots[0];
  if (minutes >= 20) tenMinutesLine.innerHTML = hourDots[1];
  if (minutes >= 30) tenMinutesLine.innerHTML = hourDots[2];
  if (minutes >= 40) tenMinutesLine.innerHTML = hourDots[3];
  if (minutes >= 50) tenMinutesLine.innerHTML = hourDots[4];

  // Handle the minute rectangles.
  switch (minutes % 10)
    {
    case 0: minutesLine.innerHTML = minuteDots[0]; break;
    case 1: minutesLine.innerHTML = minuteDots[1]; break;
    case 2: minutesLine.innerHTML = minuteDots[2]; break;
    case 3: minutesLine.innerHTML = minuteDots[3]; break;
    case 4: minutesLine.innerHTML = minuteDots[4]; break;
    case 5: minutesLine.innerHTML = minuteDots[5]; break;
    case 6: minutesLine.innerHTML = minuteDots[6]; break;
    case 7: minutesLine.innerHTML = minuteDots[7]; break;
    case 8: minutesLine.innerHTML = minuteDots[8]; break;
    case 9: minutesLine.innerHTML = minuteDots[9]; break;
    }

  // Blink the last block every second.
  minutesLine.innerHTML += secondMarkers[Math.floor(seconds / 15)];

}
//-->
</script>
  </head>

<body onload="blinkSomething(); setInterval('blinkSomething()', 1000)" >
  <div id="clockDisplay">
    <span id="firstHoursLine" style="font-family:courier"></span><BR />
    <span id="secondHoursLine" style="font-family:courier"></span><BR />
    <span id="tenMinutesLine" style="font-family:courier"></span><BR />
    <span id="minutesLine" style="font-family:courier"></span>
  </div>
      </body>
    </html>
